<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-row layui-col-space15" id="block">
      <!--模板渲染-->
    </div>
    <!-- <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">湿度</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-shidu"></i><span
                   style="margin:0px auto;color: #05aaaa;" id="lharea">45</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">%RH</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">氨气</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-anqi"></i><span
                   style="margin:0px auto;color: #05aaaa;" id="tjarea">0</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">PPM</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;background-color: red">
         <div class="layui-card-header" style="border-bottom: 1px solid red;">
           <span style="color: #FFF;">二氧化碳</span>
           <span class="layui-badge layui-bg-red layuiadmin-badge" style="color: #FFF">超标</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline  iconfont layui-extend-eryanghuatan"></i><span
                   style="margin:0px auto;color: #FFF;">1500</span></p>
           <p>
             <span style="float:right;color: #FFF;">CO2</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">风速</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-fengsu"></i><span
                   style="margin:0px auto;color: #05aaaa;">7</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">M/S</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">光照强度</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-guangzhaoqiangdutubiao-"></i><span
                   style="margin:0px auto;color: #05aaaa;">100</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">LX</span>
           </p>
         </div>
       </div>
     </div>-->
    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15" id="findHomecontainer">
        <!--图-->
      </div>
    </div>

  </div>
</div>

<script id="demo" type="text/html">
  {{# layui.each(d.list, function(index, item){ }}
  <div class="layui-col-sm6 layui-col-md2">
    <div class="layui-card" style="height: 123px;">
      <div class="layui-card-header">
        {{# if(item.datatype=='wd'){ }}
        <span style="color: #05aaaa;">温度</span>
        {{# } }}
        {{# if(item.datatype=='sd'){ }}
        <span style="color: #05aaaa;">湿度</span>
        {{# } }}
        {{# if(item.datatype=='co2'){ }}
        <span style="color: #05aaaa;">二氧化碳</span>
        {{# } }}
        {{# if(item.datatype=='aq'){ }}
        <span style="color: #05aaaa;">氨气</span>
        {{# } }}
        {{# if(item.datatype=='fs'){ }}
        <span style="color: #05aaaa;">风速</span>
        {{# } }}
        {{# if(item.datatype=='gzqd'){ }}
        <span style="color: #05aaaa;">光照强度</span>
        {{# } }}
        <!--        <span style="color: #05aaaa;">{{ item.datatype }}</span>-->
        <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
      </div>
      <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
        <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;">
          {{# if(item.datatype=='wd'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-wendu"></i>
          {{# } }}
          {{# if(item.datatype=='sd'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-shidu"></i>
          {{# } }}
          {{# if(item.datatype=='co2'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-eryanghuatan"></i>
          {{# } }}
          {{# if(item.datatype=='aq'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-anqi"></i>
          {{# } }}
          {{# if(item.datatype=='fs'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-fengsu"></i>
          {{# } }}
          {{# if(item.datatype=='gzqd'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-guangzhaoqiangdutubiao-"></i>
          {{# } }}
          <span style="margin:0px auto;color: #05aaaa;font-size: 25px" id="area">{{ item.data }}</span></p>
        <p>
          {{# if(item.datatype=='wd'){ }}
          <span style="float:right;color: #05aaaa;">℃</span>
          {{# } }}
          {{# if(item.datatype=='sd'){ }}
          <span style="float:right;color: #05aaaa;">%RH</span>
          {{# } }}
          {{# if(item.datatype=='co2'){ }}
          <span style="float:right;color: #05aaaa;">CO2</span>
          {{# } }}
          {{# if(item.datatype=='aq'){ }}
          <span style="float:right;color: #05aaaa;">PPM</span>
          {{# } }}
          {{# if(item.datatype=='fs'){ }}
          <span style="float:right;color: #05aaaa;">M/S</span>
          {{# } }}
          {{# if(item.datatype=='gzqd'){ }}
          <span style="float:right;color: #05aaaa;">LX</span>
          {{# } }}

        </p>
      </div>
    </div>
  </div>
  {{#  }); }}
  {{# if(d.list.length === 0){ }}
  无数据
  {{# } }}
</script>


<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>

  layui.use(['index', 'table', 'form', 'laytpl'], function () {
    var $ = layui.jquery;
    var laytpl = layui.laytpl;

    /*-----------------查询豆腐块Start------------------*/
    let promise = new Promise(function (resolve, reject) {
      $.ajax({
        url: "home/findHomeblock.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          console.log(ret)
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    promise.then(data => {
      var rets = { //数据
        "list": data
      };
      laytpl($("#demo").html()).render(rets, function (html) {
        $("#block").html(html);
      });
    });
    /*-----------------查询豆腐块End------------------*/

    /*-----------------图表查询Start------------------*/
    let qytop = new Promise(function (resolve, reject) {
      $.ajax({
        url: "home/findHomecontainer.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    qytop.then(obj => {
      //console.log(obj);
      var arr = [];
      for (var i = 0; i < obj.length; i++) {
        for (const st in obj[i]) {
          if (st == 'co2') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var htm = '<div class="layui-col-sm6">\n' +
              '<div class="layui-card">\n' +
              '  <div class="layui-card-header">实时二氧化碳展示</div>\n' +
              '  <div class="layui-card-body">\n' +
              '    <table class="layui-table" lay-skin="line">\n' +
              '      <tbody>\n' +
              '      <tr>\n' +
              '        <td>\n' +
              '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
              '        </td>\n' +
              '      </tr>\n' +
              '      </tbody>\n' +
              '    </table>\n' +
              '  </div>\n' +
              '</div>\n' +
              ' </div>';
            $("#findHomecontainer").append(htm)
            var dom = document.getElementById("container" + st);
            var myChart = echarts.init(dom);
            myChart.setOption(option = {
              title: {
                text: '二氧化碳实时展示',
                subtext: '二氧化碳',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{c} CO2',
              },
              legend: {
                orient: 'vertical',
                data: ['CO2'],
                left: 'right'
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  data: date
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: 'A指标',
                  type: 'bar',
                  color: '#E5C33C',
                  data: data,
                  markPoint: {
                    data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                    ]
                  },
                  markLine: {
                    data: [
                      {type: 'average', name: '平均值'}
                    ]
                  }
                }
              ],
              dataZoom: [{
                start: 0,//默认为0
                end: 100,//默认为100
              }, {
                startValue: '2014-06-01'
              }, {
                type: 'inside'
              }]
            });
          } else if (st == 'wd') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var htm = '<div class="layui-col-sm6">\n' +
              '<div class="layui-card">\n' +
              '  <div class="layui-card-header">实时温度数据展示</div>\n' +
              '  <div class="layui-card-body">\n' +
              '    <table class="layui-table" lay-skin="line">\n' +
              '      <tbody>\n' +
              '      <tr>\n' +
              '        <td>\n' +
              '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
              '        </td>\n' +
              '      </tr>\n' +
              '      </tbody>\n' +
              '    </table>\n' +
              '  </div>\n' +
              '</div>\n' +
              ' </div>';
            $("#findHomecontainer").append(htm)
            var dom = document.getElementById("container" + st);
            var myChart = echarts.init(dom);
            myChart.setOption(option = {
              title: {
                text: '实时温度统计'
              },
              tooltip: {
                formatter: '{a} <br/>{c}℃',
                trigger: 'axis'
              },
              xAxis: {
                data: date
              },
              yAxis: {
                splitLine: {
                  show: false
                }
              },

              toolbox: {
                left: 'center',
                feature: {
                  dataZoom: {
                    yAxisIndex: 'none'
                  },
                  restore: {},
                  saveAsImage: {}
                }
              },

              dataZoom: [{
                start: 0,//默认为0
                end: 100,//默认为100
              }, {
                startValue: '2014-06-01'
              }, {
                type: 'inside'
              }],
              visualMap: {
                top: 10,
                right: 10,
                pieces: [{
                  gt: 17,
                  lte: 27,
                  color: '#5bc49f'
                }, {
                  gt: 28,
                  lte: 37,
                  color: '#feb64d'
                }, {
                  gt: 38,
                  color: '#ff7c7c'
                }],
                outOfRange: {
                  color: '#9287E7'
                }
              },
              series: {
                name: '温度', type: 'line',
                data: data,
                markLine: {
                  silent: true,
                  data: [{
                    yAxis: 25
                  }]
                }
              }
            });

          } else if (st == 'sd') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var htm = '<div class="layui-col-sm6">\n' +
              '<div class="layui-card">\n' +
              '  <div class="layui-card-header">实时湿度数据展示</div>\n' +
              '  <div class="layui-card-body">\n' +
              '    <table class="layui-table" lay-skin="line">\n' +
              '      <tbody>\n' +
              '      <tr>\n' +
              '        <td>\n' +
              '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
              '        </td>\n' +
              '      </tr>\n' +
              '      </tbody>\n' +
              '    </table>\n' +
              '  </div>\n' +
              '</div>\n' +
              ' </div>';
            $("#findHomecontainer").append(htm)
            var dom = document.getElementById("container" + st);
            var myChart = echarts.init(dom);
            myChart.setOption(option = {
              title: {
                text: '实时湿度统计'
              },
              tooltip: {
                formatter: '{a} <br/>{c}%HR',
                trigger: 'axis'
              },
              xAxis: {
                data: date
              },
              yAxis: {
                splitLine: {
                  show: false
                }
              },

              toolbox: {
                left: 'center',
                feature: {
                  dataZoom: {
                    yAxisIndex: 'none'
                  },
                  restore: {},
                  saveAsImage: {}
                }
              },

              dataZoom: [{
                start: 0,//默认为0
                end: 100,//默认为100
              }, {
                startValue: '2014-06-01'
              }, {
                type: 'inside'
              }],
              visualMap: {
                top: 10,
                right: 10,
                pieces: [{
                  gt: 17,
                  lte: 27,
                  color: '#60C2EE'
                }, {
                  gt: 28,
                  lte: 37,
                  color: '#35C5EA'
                }, {
                  gt: 38,
                  color: '#2CBDD3'
                }],
                outOfRange: {
                  color: '#999'
                }
              },
              series: {
                name: '湿度', type: 'line',
                data: data,
                markLine: {
                  silent: true,
                  data: [{
                    yAxis: 50
                  }, {
                    yAxis: 70
                  }, {
                    yAxis: 90
                  }]
                }
              }
            });

          } else if (st == 'gzqd') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var htm = '<div class="layui-col-sm6">\n' +
              '<div class="layui-card">\n' +
              '  <div class="layui-card-header">实时光照强度展示</div>\n' +
              '  <div class="layui-card-body">\n' +
              '    <table class="layui-table" lay-skin="line">\n' +
              '      <tbody>\n' +
              '      <tr>\n' +
              '        <td>\n' +
              '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
              '        </td>\n' +
              '      </tr>\n' +
              '      </tbody>\n' +
              '    </table>\n' +
              '  </div>\n' +
              '</div>\n' +
              ' </div>';
            $("#findHomecontainer").append(htm)
            var dom = document.getElementById("container" + st);
            var myChart = echarts.init(dom);
            myChart.setOption(option = {
              title: {
                text: '实时光照强度统计'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                data: date
              },
              yAxis: {
                min: 0,
                splitNumber: 10,
                splitLine: {
                  show: false
                }
              },

              toolbox: {
                left: 'center',
                feature: {
                  dataZoom: {
                    yAxisIndex: 'none'
                  },
                  restore: {},
                  saveAsImage: {}
                }
              },

              dataZoom: [{
                startValue: '2014-06-01'
              }, {
                type: 'inside'
              }],
              visualMap: {
                top: 10,
                right: 10,
                pieces: [{
                  gt: 0,
                  lte: 15,
                  color: '#096'
                }, {
                  gt: 15,
                  lte: 30,
                  color: '#ffde33'
                }, {
                  gt: 30,
                  lte: 40,
                  color: '#ff9933'
                }, {
                  gt: 40,
                  lte: 60,
                  color: '#cc0033'
                }, {
                  gt: 60,
                  lte: 70,
                  color: '#660099'
                }, {
                  gt: 70,
                  color: '#7e0023'
                }],
                outOfRange: {
                  color: '#999'
                }
              },
              series: {
                name: "光照", type: 'line',
                data: data,
                markLine: {
                  silent: true,
                  data: []
                }
              }
            });

          } else if (st == 'aq') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var htm = '<div class="layui-col-sm6">\n' +
              '<div class="layui-card">\n' +
              '  <div class="layui-card-header">实时氨气数据展示</div>\n' +
              '  <div class="layui-card-body">\n' +
              '    <table class="layui-table" lay-skin="line">\n' +
              '      <tbody>\n' +
              '      <tr>\n' +
              '        <td>\n' +
              '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
              '        </td>\n' +
              '      </tr>\n' +
              '      </tbody>\n' +
              '    </table>\n' +
              '  </div>\n' +
              '</div>\n' +
              ' </div>';
            $("#findHomecontainer").append(htm)
            var dom = document.getElementById("container" + st);
            var myChart = echarts.init(dom);
            myChart.setOption(option = {
              title: {
                text: '氨气实时展示',
                subtext: '氨气',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis'
                ,
                formatter: '{a} <br/>{c} PPM',
              },
              legend: {
                orient: 'vertical',
                data: ['A指标'],
                left: 'right'
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  data: date
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: 'A指标',
                  type: 'bar',
                  color: '#7079DF',
                  data: data,
                  markPoint: {
                    data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                    ]
                  },
                  markLine: {
                    data: [
                      {type: 'average', name: '平均值'}
                    ]
                  }
                }
              ],
              dataZoom: [{
                start: 0,//默认为0
                end: 100,//默认为100
              }, {
                startValue: '2014-06-01'
              }, {
                type: 'inside'
              }]
            });
          } else if (st == 'fs') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var htm = '<div class="layui-col-sm6">\n' +
              '<div class="layui-card">\n' +
              '  <div class="layui-card-header">实时风速展示</div>\n' +
              '  <div class="layui-card-body">\n' +
              '    <table class="layui-table" lay-skin="line">\n' +
              '      <tbody>\n' +
              '      <tr>\n' +
              '        <td>\n' +
              '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
              '        </td>\n' +
              '      </tr>\n' +
              '      </tbody>\n' +
              '    </table>\n' +
              '  </div>\n' +
              '</div>\n' +
              ' </div>';
            $("#findHomecontainer").append(htm)
            var dom = document.getElementById("container" + st);
            var myChart = echarts.init(dom);
            myChart.setOption(option = {
              color: '#AFE39B',
              title: {
                text: '风速逐时数据展示',
                subtext: '当天',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                data: date
              },
              yAxis: {
                name: '风速/M/S',
                type: 'value'
              },
              series: [{
                name: '风速',
                data: data,
                type: 'bar',
                markPoint: {
                  data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                  ]
                },
                markLine: {
                  data: [
                    {type: 'average', name: '平均值'}
                  ]
                }
              }],
              grid: {
                left: '3%',
                right: '4%',
                bottom: '0%',
                top: '25%',
                containLabel: true
              }
            });
          }

        }

      }

    });
    /*-----------------图表查询End------------------*/


  });


</script>
</body>
</html>